




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Visual effects
 - CSS2.1 Test Suite</title>
  <style type="text/css">* { margin: 0; padding: 0 }
    @import "http://www.w3.org/StyleSheets/TR/base.css";
    @import "../indices.css";
  </style>
 </head>

 <body>

  <h1>CSS2.1 Test Suite</h1>
  <h2>Visual effects
 (149 tests)</h2>
  <table width="100%">
    <col id="test-column"></col>
    <col id="flags-column"></col>
    <col id="info-column"></col>
    <thead>
      <tr>
        <th>Test</th>
        <th><abbr title="Rendering References">Refs</abbr></th>
        <th>Flags</th>
        <th>Info</th>
      </tr>
    </thead>
    <tbody id="s11.1">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s11.1">+</a>
        <a href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping">11.1 Overflow and clipping
</a></th></tr>
      <!-- 12 tests -->
      <tr id="abspos-overflow-001-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-001.xht">abspos-overflow-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: scroll
        </td>
      </tr>
      <tr id="abspos-overflow-002-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-002.xht">abspos-overflow-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: scroll
        </td>
      </tr>
      <tr id="abspos-overflow-003-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-003.xht">abspos-overflow-003</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: scroll
        </td>
      </tr>
      <tr id="abspos-overflow-004-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-004.xht">abspos-overflow-004</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: hidden
        </td>
      </tr>
      <tr id="abspos-overflow-005-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-005.xht">abspos-overflow-005</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: hidden
        </td>
      </tr>
      <tr id="abspos-overflow-006-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-006.xht">abspos-overflow-006</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: hidden
        </td>
      </tr>
      <tr id="abspos-overflow-007-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-007.xht">abspos-overflow-007</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: auto
        </td>
      </tr>
      <tr id="abspos-overflow-008-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-008.xht">abspos-overflow-008</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: auto
        </td>
      </tr>
      <tr id="abspos-overflow-009-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-009.xht">abspos-overflow-009</a></strong></td>
        <td></td>
        <td></td>
        <td>Absolutely positioned children of overflow: auto
        </td>
      </tr>
      <tr id="abspos-overflow-010-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-010.xht">abspos-overflow-010</a></strong></td>
        <td></td>
        <td></td>
        <td>Positioning, Overflow, and Stacking: Empty positioned children of 'overflow:auto' boxes
        </td>
      </tr>
      <tr id="abspos-overflow-011-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-011.xht">abspos-overflow-011</a></strong></td>
        <td></td>
        <td></td>
        <td>Positioning, Overflow, and Stacking: 'overflow:auto' as an in-flow sibling of a positioned element
        </td>
      </tr>
      <tr id="abspos-overflow-012-11.1" class="primary">
        <td><strong>
            <a href="abspos-overflow-012.xht">abspos-overflow-012</a></strong></td>
        <td></td>
        <td></td>
        <td>Positioning, Overflow, and Clipping: Does 'overflow:auto' affect positioned elements that are relative to elements outside the overflow
        </td>
      </tr>
    </tbody>
    <tbody id="s11.1.1">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s11.1.1">+</a>
        <a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">11.1.1 Overflow: the 'overflow' property
</a></th></tr>
      <!-- 50 tests -->
      <tr id="clipping-002-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-002.xht">clipping-002</a></strong></td>
        <td></td>
        <td></td>
        <td>'overflow': Basic Test
        </td>
      </tr>
      <tr id="clipping-003-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-003.xht">clipping-003</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS test
        </td>
      </tr>
      <tr id="clipping-004-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-004.xht">clipping-004</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-005-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-005.xht">clipping-005</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-006-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-006.xht">clipping-006</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-007-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-007.xht">clipping-007</a></strong></td>
        <td></td>
        <td></td>
        <td>
        </td>
      </tr>
      <tr id="clipping-008-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-008.xht">clipping-008</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-015-11.1.1" class="primary">
        <td><strong>
            <a href="clipping-015.xht">clipping-015</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="max-height-105-11.1.1" class="">
        <td>
            <a href="max-height-105.xht">max-height-105</a></td>
        <td></td>
        <td></td>
        <td>max-height - oveflow
          <ul class="assert">
            <li>The 'max-height' property can restrain the used value of height when the used value of height is greater than the declared max-height and not when it is less than the declared max-height and not when it does not exceed the declared max-height.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-height-107-11.1.1" class="primary ahem">
        <td><strong>
            <a href="max-height-107.xht">max-height-107</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-height - space for scrollbar
          <ul class="assert">
            <li>Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-height-108-11.1.1" class="ahem">
        <td>
            <a href="max-height-108.xht">max-height-108</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-height - overflow
          <ul class="assert">
            <li>The max-height property can restrain the used value of height when the used value of height is greater than the declared max-height and not when it is less than the declared max-height and not when it does not exceed the declared max-height.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-height-109-11.1.1" class="ahem">
        <td>
            <a href="max-height-109.xht">max-height-109</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-height - overflow
          <ul class="assert">
            <li>The 'max-height' property can restrain the used value of height when the used value of height is greater than the declared max-height.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-height-110-11.1.1" class="primary ahem">
        <td><strong>
            <a href="max-height-110.xht">max-height-110</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-height - space for scrollbar
          <ul class="assert">
            <li>Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-height-111-11.1.1" class="ahem">
        <td>
            <a href="max-height-111.xht">max-height-111</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-height - float and overflow
          <ul class="assert">
            <li>The content of the #test-red-overlapped generates an active horizontal scrollbar. The height of such horizontal scrollbar adds itself to the content making it exceed the max-height constraint of 200px. Therefore, such vertical space taken by the horizontal scrollbar must be substracted from the height of the content. An active vertical scrollbar then must be generated to provide access to the equivalent of the height of the horizontal scrollbar.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-width-105-11.1.1" class="ahem">
        <td>
            <a href="max-width-105.xht">max-width-105</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-width - height and overflow
          <ul class="assert">
            <li>'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-width-107-11.1.1" class="ahem">
        <td>
            <a href="max-width-107.xht">max-width-107</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-width - height and overflow
          <ul class="assert">
            <li>'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width.</li>
          </ul>
        </td>
      </tr>
      <tr id="max-width-108-11.1.1" class="ahem">
        <td>
            <a href="max-width-108.xht">max-width-108</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>max-width - float and overflow
          <ul class="assert">
            <li>'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width.</li>
          </ul>
        </td>
      </tr>
      <tr id="min-height-104-11.1.1" class="ahem">
        <td>
            <a href="min-height-104.xht">min-height-104</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>min-height - space for scrollbar
          <ul class="assert">
            <li>Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.</li>
          </ul>
        </td>
      </tr>
      <tr id="min-height-105-11.1.1" class="ahem">
        <td>
            <a href="min-height-105.xht">min-height-105</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>min-height - space for scrollbar
          <ul class="assert">
            <li>Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.</li>
          </ul>
        </td>
      </tr>
      <tr id="min-height-106-11.1.1" class="ahem">
        <td>
            <a href="min-height-106.xht">min-height-106</a></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>min-height - float and overflow
          <ul class="assert">
            <li>'min-height' specifies a fixed minimum used height. If the element requires an horizontal scrollbar, then the horizontal scrollbar height should be subtracted from the height of its containing block so that the resulting used height continues to honor the declared min-height.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-001-11.1.1" class="primary">
        <td><strong>
            <a href="overflow-001.xht">overflow-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Overflow set to 'visible'
          <ul class="assert">
            <li>The 'overflow' property set to 'visible' properly shows all content that extends beyond the containing element.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-002-11.1.1" class="primary">
        <td><strong>
            <a href="overflow-002.xht">overflow-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Overflow set to 'hidden'
          <ul class="assert">
            <li>The 'overflow' property set to 'hidden' properly hides all content that extends beyond the containing element.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-003-11.1.1" class="primary interact">
        <td><strong>
            <a href="overflow-003.xht">overflow-003</a></strong></td>
        <td></td>
        <td><abbr class="interact" title="Requires User Interaction">Interact</abbr></td>
        <td>Overflow set to 'scroll'
          <ul class="assert">
            <li>The 'overflow' property set to 'scroll' properly applies a scrolling mechanism to access overflowing content.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-004-11.1.1" class="primary interact">
        <td><strong>
            <a href="overflow-004.xht">overflow-004</a></strong></td>
        <td></td>
        <td><abbr class="interact" title="Requires User Interaction">Interact</abbr></td>
        <td>Overflow set to 'auto'
          <ul class="assert">
            <li>The 'overflow' property set to 'auto' properly applies a scrolling mechanism to access overflowing content.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-005-11.1.1" class="primary interact">
        <td><strong>
            <a href="overflow-005.xht">overflow-005</a></strong></td>
        <td></td>
        <td><abbr class="interact" title="Requires User Interaction">Interact</abbr></td>
        <td>Overflow set to 'inherit'
          <ul class="assert">
            <li>The 'overflow' property set to 'inherit' properly inherits its value from its parent element.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-006-11.1.1" class="primary">
        <td><strong>
            <a href="overflow-006.xht">overflow-006</a></strong></td>
        <td></td>
        <td></td>
        <td>Floats and overflow
        </td>
      </tr>
      <tr id="overflow-007-11.1.1" class="primary interact">
        <td><strong>
            <a href="overflow-007.xht">overflow-007</a></strong></td>
        <td></td>
        <td><abbr class="interact" title="Requires User Interaction">Interact</abbr></td>
        <td>margin and overflow
        </td>
      </tr>
      <tr id="overflow-008-11.1.1" class="primary interact">
        <td><strong>
            <a href="overflow-008.xht">overflow-008</a></strong></td>
        <td></td>
        <td><abbr class="interact" title="Requires User Interaction">Interact</abbr></td>
        <td>margin and overflow
        </td>
      </tr>
      <tr id="overflow-ancestors-001-11.1.1" class="primary interact">
        <td><strong>
            <a href="overflow-ancestors-001.xht">overflow-ancestors-001</a></strong></td>
        <td></td>
        <td><abbr class="interact" title="Requires User Interaction">Interact</abbr></td>
        <td>Overflow affect on children
          <ul class="assert">
            <li>Overflow clipping does not affect elements which are ancestors to the element being clipped.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-001-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-001.xht">overflow-applies-to-001</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-row-group'
          <ul class="assert">
            <li>The 'overflow' property does not apply to elements with 'display' set to 'table-row-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-002-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-002.xht">overflow-applies-to-002</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-header-group'
          <ul class="assert">
            <li>The 'overflow' property does not apply to elements with 'display' set to 'table-header-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-003-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-003.xht">overflow-applies-to-003</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-footer-group'
          <ul class="assert">
            <li>The 'overflow' property does not apply to elements with 'display' set to 'table-footer-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-004-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-004.xht">overflow-applies-to-004</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-row'
          <ul class="assert">
            <li>The 'overflow' property does not apply to elements with 'display' set to 'table-row'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-005-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-005.xht">overflow-applies-to-005</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-column-group'
          <ul class="assert">
            <li>The 'overflow' property does not apply to elements with 'display' set to 'table-column-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-006-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-006.xht">overflow-applies-to-006</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-column'
          <ul class="assert">
            <li>The 'overflow' property does not apply to elements with 'display' set to 'table-column'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-007-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-007.xht">overflow-applies-to-007</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-cell'
          <ul class="assert">
            <li>The 'overflow' property applies to elements with 'display' set to 'table-cell'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-008-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-008.xht">overflow-applies-to-008</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'inline'
          <ul class="assert">
            <li>The 'overflow' property does not apply to elements with 'display' set to 'inline'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-009-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-009.xht">overflow-applies-to-009</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'block'
          <ul class="assert">
            <li>The 'overflow' property applies to elements with 'display' set to 'block'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-010-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-010.xht">overflow-applies-to-010</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'list-item'
          <ul class="assert">
            <li>The 'overflow' property applies to elements with 'display' set to 'list-item'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-012-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-012.xht">overflow-applies-to-012</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'inline-block'
          <ul class="assert">
            <li>The 'overflow' property applies to elements with 'display' set to 'inline-block'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-013-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-013.xht">overflow-applies-to-013</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table'
          <ul class="assert">
            <li>The 'overflow' property does apply to elements with 'display' set to 'table'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-014-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-014.xht">overflow-applies-to-014</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'inline-table'
          <ul class="assert">
            <li>The 'overflow' property does apply to elements with 'display' set to 'inline-table'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-applies-to-015-11.1.1" class="primary ahem">
        <td><strong>
            <a href="overflow-applies-to-015.xht">overflow-applies-to-015</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>overflow applied to elements with 'display' set to 'table-caption'
          <ul class="assert">
            <li>The 'overflow' property does apply to elements with 'display' set to 'table-caption'.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-parent-001-11.1.1" class="primary">
        <td><strong>
            <a href="overflow-parent-001.xht">overflow-parent-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Overflow hidden on root element
          <ul class="assert">
            <li>Clipping does not affect elements where their parent is the viewport.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-print-001-11.1.1" class="primary may paged">
        <td><strong>
            <a href="overflow-print-001.xht">overflow-print-001</a></strong></td>
        <td></td>
        <td><abbr class="may" title="Behavior tested is preferred but optional.">Optional</abbr><abbr class="paged" title="Test Only Valid for Paged Media">Paged</abbr></td>
        <td>Overflow 'scroll' and printing
          <ul class="assert">
            <li>The 'overflow' property set to 'scroll' acts like 'visible' when element is printed.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-root-001-11.1.1" class="primary">
        <td><strong>
            <a href="overflow-root-001.xht">overflow-root-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Overflow on root propagates to viewport
          <ul class="assert">
            <li>The 'overflow' property set on the root propagates to the viewport.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-scrollbar-001-11.1.1" class="primary">
        <td><strong>
            <a href="overflow-scrollbar-001.xht">overflow-scrollbar-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Scrollbar placement in overflow scenario
          <ul class="assert">
            <li>The placement of the scrollbar is between the inner border edge and the outer padding edge.</li>
          </ul>
        </td>
      </tr>
      <tr id="overflow-visible-viewport-001-11.1.1" class="primary dom">
        <td><strong>
            <a href="overflow-visible-viewport-001.xht">overflow-visible-viewport-001</a></strong></td>
        <td></td>
        <td><abbr class="dom" title="Requires DOM (Document Object Model) Support">DOM/JS</abbr></td>
        <td>Overflow set to visible is interpreted as auto on viewport
          <ul class="assert">
            <li>When 'overflow: visible' is set on the viewport it is interpreted as 'auto' but is still returns a computed value of 'visible'.</li>
          </ul>
        </td>
      </tr>
      <tr id="stack-overflow-001-11.1.1" class="primary">
        <td><strong>
            <a href="stack-overflow-001.xht">stack-overflow-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Stacking order and overflow
        </td>
      </tr>
    </tbody>
    <tbody id="s11.1.2">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s11.1.2">+</a>
        <a href="http://www.w3.org/TR/CSS21/visufx.html#clipping">11.1.2 Clipping: the 'clip' property
</a></th></tr>
      <!-- 64 tests -->
      <tr id="absolute-replaced-height-036-11.1.2" class="primary image">
        <td><strong>
            <a href="absolute-replaced-height-036.xht">absolute-replaced-height-036</a></strong></td>
        <td></td>
        <td><abbr class="image" title="Requires Bitmap Graphics Support">Bitmaps</abbr></td>
        <td>Absolute Replaced Elements: specified 'top' and 'bottom' with auto margins
          <ul class="assert">
            <li>If 'top' and 'bottom' are specified on an absolutely-positioned replaced element, then any remaining space is split amongst the 'auto' vertical margins.</li>
          </ul>
        </td>
      </tr>
      <tr id="abspos-028-11.1.2" class="primary">
        <td><strong>
            <a href="abspos-028.xht">abspos-028</a></strong></td>
        <td></td>
        <td></td>
        <td>Abspos static position and clear
          <ul class="assert">
            <li>The static position is calculated as if clear had been none.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-001-11.1.2" class="primary dom">
        <td><strong>
            <a href="clip-001.xht">clip-001</a></strong></td>
        <td></td>
        <td><abbr class="dom" title="Requires DOM (Document Object Model) Support">DOM/JS</abbr></td>
        <td>clip - auto value
          <ul class="assert">
            <li>An element must not clip when clip is set to auto.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-004-11.1.2" class="primary">
        <td><strong>
            <a href="clip-004.xht">clip-004</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using pixels with a negative zero value, -0px
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in pixels, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-005-11.1.2" class="primary">
        <td><strong>
            <a href="clip-005.xht">clip-005</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using pixels with a zero value, 0px
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in pixels, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-006-11.1.2" class="primary">
        <td><strong>
            <a href="clip-006.xht">clip-006</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using pixels with a zero value, +0px
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in pixels, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-007-11.1.2" class="primary">
        <td><strong>
            <a href="clip-007.xht">clip-007</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using pixels with a nominal value, 96px
          <ul class="assert">
            <li>The 'clip' property sets a value of ninety-six pixels, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-008-11.1.2" class="primary">
        <td><strong>
            <a href="clip-008.xht">clip-008</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using pixels with a positive nominal value, +96px
          <ul class="assert">
            <li>The 'clip' property sets a value of ninety-six pixels, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-016-11.1.2" class="primary">
        <td><strong>
            <a href="clip-016.xht">clip-016</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using points with a negative zero value, -0pt
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in points, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-017-11.1.2" class="primary">
        <td><strong>
            <a href="clip-017.xht">clip-017</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using points with a zero value, 0pt
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in points, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-018-11.1.2" class="primary">
        <td><strong>
            <a href="clip-018.xht">clip-018</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using points with a zero value, +0pt
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in points, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-019-11.1.2" class="primary">
        <td><strong>
            <a href="clip-019.xht">clip-019</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using points with a nominal value, 72pt
          <ul class="assert">
            <li>The 'clip' property sets a of seventy-two points for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-020-11.1.2" class="primary">
        <td><strong>
            <a href="clip-020.xht">clip-020</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using points with a positive nominal value, +72pt
          <ul class="assert">
            <li>The 'clip' property sets a of seventy-two points for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-028-11.1.2" class="primary">
        <td><strong>
            <a href="clip-028.xht">clip-028</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using picas with a negative zero value, -0pc
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in picas, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-029-11.1.2" class="primary">
        <td><strong>
            <a href="clip-029.xht">clip-029</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using picas with a zero value, 0pc
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in picas, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-030-11.1.2" class="primary">
        <td><strong>
            <a href="clip-030.xht">clip-030</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using picas with a zero value, +0pc
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in picas, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-031-11.1.2" class="primary">
        <td><strong>
            <a href="clip-031.xht">clip-031</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using picas with a nominal value, 6pc
          <ul class="assert">
            <li>The 'clip' property sets a of six picas for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-032-11.1.2" class="primary">
        <td><strong>
            <a href="clip-032.xht">clip-032</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using picas with a positive nominal value, +6pc
          <ul class="assert">
            <li>The 'clip' property sets a of six picas for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-040-11.1.2" class="primary">
        <td><strong>
            <a href="clip-040.xht">clip-040</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using centimeters with a negative zero value, -0cm
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in centimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-041-11.1.2" class="primary">
        <td><strong>
            <a href="clip-041.xht">clip-041</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using centimeters with a zero value, 0cm
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in centimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-042-11.1.2" class="primary">
        <td><strong>
            <a href="clip-042.xht">clip-042</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using centimeters with a zero value, +0cm
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in centimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-043-11.1.2" class="primary">
        <td><strong>
            <a href="clip-043.xht">clip-043</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using centimeters with a nominal value, 2.54cm
          <ul class="assert">
            <li>The 'clip' property sets a value of 2.54 centimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-044-11.1.2" class="primary">
        <td><strong>
            <a href="clip-044.xht">clip-044</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using centimeters with a positive nominal value, +2.54cm
          <ul class="assert">
            <li>The 'clip' property sets a value of 2.54 centimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-052-11.1.2" class="primary">
        <td><strong>
            <a href="clip-052.xht">clip-052</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using millimeters with a negative zero value, -0mm
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in millimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-053-11.1.2" class="primary">
        <td><strong>
            <a href="clip-053.xht">clip-053</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using millimeters with a zero value, 0mm
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in millimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-054-11.1.2" class="primary">
        <td><strong>
            <a href="clip-054.xht">clip-054</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using millimeters with a zero value, +0mm
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in millimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-055-11.1.2" class="primary">
        <td><strong>
            <a href="clip-055.xht">clip-055</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using millimeters with a nominal value, 25.4mm
          <ul class="assert">
            <li>The 'clip' property sets a value of 25.4 millimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-056-11.1.2" class="primary">
        <td><strong>
            <a href="clip-056.xht">clip-056</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using millimeters with a positive nominal value, +25.4mm
          <ul class="assert">
            <li>The 'clip' property sets a value of 25.4 millimeters, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-064-11.1.2" class="primary">
        <td><strong>
            <a href="clip-064.xht">clip-064</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using inches with a negative zero value, -0in
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in inches, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-065-11.1.2" class="primary">
        <td><strong>
            <a href="clip-065.xht">clip-065</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using inches with a zero value, 0in
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in inches, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-066-11.1.2" class="primary">
        <td><strong>
            <a href="clip-066.xht">clip-066</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using inches with a zero value, +0in
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in inches, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-067-11.1.2" class="primary">
        <td><strong>
            <a href="clip-067.xht">clip-067</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using inches with a nominal value, 1in
          <ul class="assert">
            <li>The 'clip' property sets a value, in inches, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-068-11.1.2" class="primary">
        <td><strong>
            <a href="clip-068.xht">clip-068</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using inches with a positive nominal value, +96in
          <ul class="assert">
            <li>The 'clip' property sets a value, in inches, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-076-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-076.xht">clip-076</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'em' units with a negative zero value, -0em
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in 'em' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-077-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-077.xht">clip-077</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'em' units with a zero value, 0em
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in 'em' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-078-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-078.xht">clip-078</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'em' units with a positive zero value, +0em
          <ul class="assert">
            <li>The 'clip' property sets a positive zero value, in 'em' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-079-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-079.xht">clip-079</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'em' units with a nominal value, 6em
          <ul class="assert">
            <li>The 'clip' property sets a value, in 'em' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-080-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-080.xht">clip-080</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'em' units with a positive nominal value, +6em
          <ul class="assert">
            <li>The 'clip' property sets a value, in 'em' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-088-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-088.xht">clip-088</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'ex' units with a negative zero value, -0ex
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value, in 'ex' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-089-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-089.xht">clip-089</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'ex' units with a zero value, 0ex
          <ul class="assert">
            <li>The 'clip' property sets a zero value, in 'ex' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-090-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-090.xht">clip-090</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'ex' units with a positive zero value, +0ex
          <ul class="assert">
            <li>The 'clip' property sets a positive zero value, in 'ex' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-091-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-091.xht">clip-091</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'ex' units with a nominal value, 7.5ex
          <ul class="assert">
            <li>The 'clip' property sets a value, in 'ex' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-092-11.1.2" class="primary ahem">
        <td><strong>
            <a href="clip-092.xht">clip-092</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>Clip using 'ex' units with a positive nominal value, +7.5ex
          <ul class="assert">
            <li>The 'clip' property sets a value, in 'ex' units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-097-11.1.2" class="primary">
        <td><strong>
            <a href="clip-097.xht">clip-097</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip with a negative zero value with no units, -0
          <ul class="assert">
            <li>The 'clip' property sets a negative zero value and no units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-098-11.1.2" class="primary">
        <td><strong>
            <a href="clip-098.xht">clip-098</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip with a zero value with no units, 0
          <ul class="assert">
            <li>The 'clip' property sets a zero value and no units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-099-11.1.2" class="primary">
        <td><strong>
            <a href="clip-099.xht">clip-099</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip with a positive zero value with no units, +0
          <ul class="assert">
            <li>The 'clip' property sets a positive zero value and no units, for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-100-11.1.2" class="primary">
        <td><strong>
            <a href="clip-100.xht">clip-100</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip using the 'rect()' function and specifying all values as 'auto'
          <ul class="assert">
            <li>The 'clip' property sets an 'auto' value for all sides of the clipping rectangle.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-101-11.1.2" class="primary">
        <td><strong>
            <a href="clip-101.xht">clip-101</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip specifying only the value 'auto'
          <ul class="assert">
            <li>The 'clip' properly applies the value of 'auto'.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-102-11.1.2" class="primary">
        <td><strong>
            <a href="clip-102.xht">clip-102</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip with the value 'inherit'
          <ul class="assert">
            <li>The 'clip' property set to 'inherit' properly inherits the appropriate value for the parent element.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-inherit-001-11.1.2" class="primary">
        <td><strong>
            <a href="clip-inherit-001.xht">clip-inherit-001</a></strong></td>
        <td></td>
        <td></td>
        <td>clip: Inheriting 'auto' arguments of rect()
          <ul class="assert">
            <li>The 'auto' keywords in rect() resolve to a used (not computed) value that aligns them with the border edges.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-non-absolute-001-11.1.2" class="primary">
        <td><strong>
            <a href="clip-non-absolute-001.xht">clip-non-absolute-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip on non-positioned element
          <ul class="assert">
            <li>Clip does not apply to non-positioned elements.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-rect-001-11.1.2" class="primary invalid may">
        <td><strong>
            <a href="clip-rect-001.xht">clip-rect-001</a></strong></td>
        <td></td>
        <td><abbr class="invalid" title="Tests Invalid CSS">Invalid</abbr><abbr class="may" title="Behavior tested is preferred but optional.">Optional</abbr></td>
        <td>clip: Missing commas in rect()
          <ul class="assert">
            <li>User agents may support separation of values within rect() by whitespace instead of commas, but not a combination of whitespace and commas.</li>
          </ul>
        </td>
      </tr>
      <tr id="clip-shape-001-11.1.2" class="primary">
        <td><strong>
            <a href="clip-shape-001.xht">clip-shape-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Clip with other invalid shape
          <ul class="assert">
            <li>A shape value other than 'rect()' is not supported.</li>
          </ul>
        </td>
      </tr>
      <tr id="clipping-001-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-001.xht">clipping-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'clip': Basic Test
        </td>
      </tr>
      <tr id="clipping-009-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-009.xht">clipping-009</a></strong></td>
        <td></td>
        <td></td>
        <td>
        </td>
      </tr>
      <tr id="clipping-010-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-010.xht">clipping-010</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-011-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-011.xht">clipping-011</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-012-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-012.xht">clipping-012</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-013-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-013.xht">clipping-013</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-014-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-014.xht">clipping-014</a></strong></td>
        <td></td>
        <td></td>
        <td>CSS clipping test
        </td>
      </tr>
      <tr id="clipping-016-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-016.xht">clipping-016</a></strong></td>
        <td></td>
        <td></td>
        <td>'clip': Basic Test
        </td>
      </tr>
      <tr id="clipping-017-11.1.2" class="primary">
        <td><strong>
            <a href="clipping-017.xht">clipping-017</a></strong></td>
        <td></td>
        <td></td>
        <td>Convoluted clip() test
        </td>
      </tr>
      <tr id="shape-spaces-001-11.1.2" class="primary may">
        <td><strong>
            <a href="shape-spaces-001.xht">shape-spaces-001</a></strong></td>
        <td></td>
        <td><abbr class="may" title="Behavior tested is preferred but optional.">Optional</abbr></td>
        <td>Clip with 'rect()' function values separated
          <ul class="assert">
            <li>User agent may also support separation of the 'rect()' function values 'top', 'right', 'bottom', and 'left' with spaces.</li>
          </ul>
        </td>
      </tr>
      <tr id="table-anonymous-whitespace-001-11.1.2" class="primary">
        <td><strong>
            <a href="table-anonymous-whitespace-001.xht">table-anonymous-whitespace-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Table Anonymous Box Generation - interleaved whitespace
          <ul class="assert">
            <li>Anonymous white space inside a tabular container does not generate any boxes.</li>
          </ul>
        </td>
      </tr>
    </tbody>
    <tbody id="s11.2">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s11.2">+</a>
        <a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">11.2 Visibility: the 'visibility' property
</a></th></tr>
      <!-- 23 tests -->
      <tr id="visibility-001-11.2" class="primary">
        <td><strong>
            <a href="visibility-001.xht">visibility-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility set to 'collapse'
          <ul class="assert">
            <li>A block with 'visibility' set to 'collapse' will not be rendered on the page but will still affect layout flow.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-002-11.2" class="primary">
        <td><strong>
            <a href="visibility-002.xht">visibility-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility set to 'hidden'
          <ul class="assert">
            <li>A block with 'visibility' set to 'collapse' will not be rendered on the page but will still affect layout flow.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-003-11.2" class="primary">
        <td><strong>
            <a href="visibility-003.xht">visibility-003</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility set to 'visible'
          <ul class="assert">
            <li>A block with 'visibility' set to 'visible' will be rendered on the page.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-004-11.2" class="primary">
        <td><strong>
            <a href="visibility-004.xht">visibility-004</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility set to 'inherit'
          <ul class="assert">
            <li>A block can inherit its 'visibility' behavior from its parent container.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-005-11.2" class="primary ahem">
        <td><strong>
            <a href="visibility-005.xht">visibility-005</a></strong></td>
        <td></td>
        <td><abbr class="ahem" title="Requires Ahem Font">Ahem</abbr></td>
        <td>visibility - descendants of a 'visibility: hidden' element
          <ul class="assert">
            <li>Descendants of a 'visibility: hidden' element will be visible if they have 'visibility: visible'</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-001-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-001.xht">visibility-applies-to-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-row-group'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-row-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-002-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-002.xht">visibility-applies-to-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-header-group'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-header-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-003-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-003.xht">visibility-applies-to-003</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-footer-group'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-footer-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-004-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-004.xht">visibility-applies-to-004</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-row'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-row'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-005-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-005.xht">visibility-applies-to-005</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-column-group'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-column-group'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-006-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-006.xht">visibility-applies-to-006</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-column'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-column'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-007-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-007.xht">visibility-applies-to-007</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-cell'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-cell'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-008-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-008.xht">visibility-applies-to-008</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'inline'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'inline'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-009-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-009.xht">visibility-applies-to-009</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'block'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'block'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-010-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-010.xht">visibility-applies-to-010</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'list-item'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'list-item'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-012-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-012.xht">visibility-applies-to-012</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'inline-block'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'inline-block'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-013-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-013.xht">visibility-applies-to-013</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-014-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-014.xht">visibility-applies-to-014</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'inline-table'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'inline-table'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-applies-to-015-11.2" class="primary">
        <td><strong>
            <a href="visibility-applies-to-015.xht">visibility-applies-to-015</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility applied to elements with 'display' set to 'table-caption'
          <ul class="assert">
            <li>The 'visibility' property applies to elements with 'display' set to 'table-caption'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-block-001-11.2" class="primary">
        <td><strong>
            <a href="visibility-block-001.xht">visibility-block-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Visibility 'collapse' on non-table row or column elements
          <ul class="assert">
            <li>The 'visibility' property set to 'collapse' acts like 'hidden' when applied to non-table row or column elements.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-collapse-001-11.2" class="dom interact">
        <td>
            <a href="visibility-collapse-001.xht">visibility-collapse-001</a></td>
        <td></td>
        <td><abbr class="dom" title="Requires DOM (Document Object Model) Support">DOM/JS</abbr><abbr class="interact" title="Requires User Interaction">Interact</abbr></td>
        <td>CSS Tables: Visibility
        </td>
      </tr>
      <tr id="visibility-descendants-001-11.2" class="primary">
        <td><strong>
            <a href="visibility-descendants-001.xht">visibility-descendants-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Descendents of hidden elements can specify a different visibility
          <ul class="assert">
            <li>Descendents of a hidden element will be visible if they have 'visibility' set to 'visible'.</li>
          </ul>
        </td>
      </tr>
      <tr id="visibility-layout-001-11.2" class="primary">
        <td><strong>
            <a href="visibility-layout-001.xht">visibility-layout-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Hidden elements still affect layout
          <ul class="assert">
            <li>Invisible boxes still affect layout.</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>

 </body>
</html>
